<template>
  <view>
  <view class="container">
    <view class="form-group1">
      <label class="text" for="passengerName">乘客姓名:</label>
      <input type="text" id="passengerName" v-model="passengerName" placeholder="请输入乘客姓名" />
    </view>
    <view class="form-group2">
      <label class="text" for="phoneNumber">手机号:</label>
      <input type="text" id="phoneNumber" v-model="phoneNumber" placeholder="请输入手机号"  />
    </view>
  </view>
    <view class="button-group">
      <button type="primary" @click="handleAddPassenger">添加乘客</button>
    </view>
  </view>
</template>

<script>
import { saveOrUpdateFriend , selectFriendById,getFriendList } from "@/api/durian/friend/friend.js";
export default {
  data() {
    return {
      id: undefined,
      passengerName: '',
      phoneNumber: '',
      friendId: undefined
    };
  },
  onLoad: function (res) {
    this.id = res.id
    this.friendInfo()

  },
  methods: {
    friendInfo() {
      selectFriendById(this.id).then(res => {
        this.phoneNumber = res.data.friendPhone
        this.passengerName = res.data.friendName
        this.friendId = res.data.id
      })
    },

    handleAddPassenger() {
      if (!this.passengerName || !this.phoneNumber) {
        this.$modal.msgError('请填写完整信息');
        return;
      }
      var data = { id: this.friendId ,friendName : this.passengerName , friendPhone : this.phoneNumber};
      saveOrUpdateFriend(data).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess('添加成功');
          this.passengerName = '';
          this.phoneNumber = '';
          this.$tab.navigateBack();
          // 刷新
          getFriendList();
        }
      });
    },
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx;
  //margin-bottom: 24rpx;
}

.form-group1 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.form-group2 {
  display: flex;
  align-items: center;
  padding: 10px;
}

label {
  width: 100px;
  text-align: right;
  //margin-right: 10px;
}
.text{
  font-size: 28rpx;
  text-align: left;
}

.button-group{
  padding: 10px;
  border-radius: 16px;
}
</style>

